import React, { FC, useEffect, createContext, useState } from 'react'
import { BrowserRouter, Routes, Route, useNavigate, useLocation } from 'react-router-dom'
import zhCN from 'antd/locale/zh_CN'

import {
  HomeOutlined,
  HomeFilled,
  UnorderedListOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from '@ant-design/icons'
import type { MenuProps } from 'antd'
import { ConfigProvider, Breadcrumb, Layout, Menu, theme, Button } from 'antd'
const { Header, Content, Footer, Sider } = Layout

type MenuItem = Required<MenuProps>['items'][number]
function getItem(label: React.ReactNode, key: React.Key, icon?: React.ReactNode, children?: MenuItem[]): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem
}
const items: MenuItem[] = [
  getItem('首页', '/', <HomeOutlined />),
  getItem('产品服务质量列表', '/qualityList', <UnorderedListOutlined />),
  getItem('产品服务质量分布', '/qualityCharts', <UnorderedListOutlined />),
  getItem('资源监控系统服务', '/grafana', <UnorderedListOutlined />),
]
import Home from '@/pages/Home'
import QualityList from '@/pages/QualityList'
import QualityDetail from '@/pages/QualityDetail'
import QualityCharts from '@/pages/QualityCharts'
import Grafana from '@/pages/Grafana'

const App: FC = () => {
  const [collapsed, setCollapsed] = useState(false)
  const navigate = useNavigate()
  const currentLocation = useLocation() // 当前的路由信息
  const {
    token: { colorBgContainer },
  } = theme.useToken()
  const ToggleMenu = (e: any) => {
    navigate(e.key, { replace: true })
  }

  return (
    <ConfigProvider locale={zhCN}>
      <Layout style={{ minHeight: '100vh' }}>
        <Sider
          breakpoint="lg"
          collapsedWidth="0"
          collapsible
          trigger={null}
          collapsed={collapsed}
          onCollapse={(value) => setCollapsed(value)}
        >
          <div className="demo-logo-vertical" />
          <Menu
            theme="dark"
            defaultSelectedKeys={[currentLocation.pathname]}
            mode="inline"
            items={items}
            onClick={ToggleMenu}
          />
        </Sider>
        <Layout>
          <Header style={{ padding: 0, background: colorBgContainer }}>
            <Button
              type="text"
              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              onClick={() => setCollapsed(!collapsed)}
              style={{
                fontSize: '16px',
                width: 64,
                height: 64,
              }}
            />
          </Header>
          <Content style={{ margin: '0 16px', overflow: 'initial' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              {currentLocation.pathname !== '/' ? <Breadcrumb.Item>首页</Breadcrumb.Item> : ''}
              <Breadcrumb.Item>
                {items.map((item: any) => {
                  return item.key === currentLocation.pathname ? item.label : ''
                })}
              </Breadcrumb.Item>
            </Breadcrumb>
            <div style={{ padding: 24, minHeight: 360, background: colorBgContainer }}>
              <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/qualityList" element={<QualityList />} />
                <Route path="/qualityDetail" element={<QualityDetail />} />
                <Route path="/qualityCharts" element={<QualityCharts />} />
                <Route path="/grafana" element={<Grafana />} />
              </Routes>
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>智能运维平台 ©2023 Created by Lzy</Footer>
        </Layout>
      </Layout>
    </ConfigProvider>
  )
}
export default App
